<template>
	<view>
		<scroll-view scroll-x="true" class="nav">
			<view class="item" :class="{ active: cur_subject === idx }" v-for="(item, idx) in subject_list" :key="idx" @click="ckSubject(item.subject_id, idx)">{{ item.subject_name }}</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	
	props: {
		subject_list: Array
	},
	data() {
		return {
			cur_subject: 0,
		};
	},
	methods: {
		ckSubject(subject_id, index) {
			this.cur_subject = index;
			this.$emit('ckSubject', subject_id);
		}
	}
};
</script>

<style scoped>
.nav {
	background: #fff;
	width: 100%;
	white-space: nowrap;
	/* border-bottom: 2upx solid #e5e5e5;
	box-shadow: 0 2upx 8upx #e5e5e5; */
}
.nav .item {
	display: inline-block;
	width: 116upx;
	text-align: center;
	line-height: 45px;
	color: #666666;
}
.nav .active {
	font-size: 34upx;
	font-weight: bold;
	color: #fe9900;
}
</style>
